<template>
	<view class="evaluate">
		<uninavbar title="评价" leftIcon='leftIcon' rightIcon='' rightText="" />
		<view class="evaluateTip">
			客观真实的评价能帮助用户做决策
		</view>
		<view class="addVideo">
			<image src="/static/images/productDetails/xj.png" mode="widthFix"></image>
			<view class="">
				添加图视频
			</view>
		</view>
		<textarea class="textarea" placeholder="请输入您对商品的想法吧…"></textarea>
		<view class="">
			<view class="goods">
				<image src="/static/images/user/sj.png" mode="widthFix"></image>
				<view>
					<view class="">
						颜色分类:白色
					</view>
					<text>128G;套餐一[us版 无卡槽]</text>
				</view>

			</view>
			<view class="evaluateList">

				描述相符
				<l-starRate v-model="star" :disabled="false" :starNum='5' activeColor="#6954D5"
					unActiveColor='#D8D8D8'></l-starRate>
				<text>{{ star.toFixed(1)}}</text>

			</view>
			<view class="evaluateList">

				服务态度
				<l-starRate v-model="star1" :disabled="false" :starNum='5' activeColor="#6954D5"
					unActiveColor='#D8D8D8'></l-starRate>
				<text>{{ star1.toFixed(1)}}</text>
			</view>
		</view>
		<view class="evaluateFoot">
			<view class="">
				<view class="checkbox" @tap="checkboxDom()">

					<image v-if="checkboxShow" class="checkboxShow" src="/static/images/productDetails/show.png"
						mode=""></image>
					<view class="checkboxHide" v-else>

					</view>
					<text>匿名</text>
				</view>
				<view class="evaluateFootTip">
					匿名会隐藏头像合昵称 <image src="/static/images/productDetails/wh.png" mode="">
					</image>
				</view>
			</view>

			<navigator class="item" url="/order/evaluateSuccess">
				<view class="evaluateFootBtn">
					发布
				</view>
			</navigator>
		</view>

	</view>
</template>

<script>
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		components: {
			uninavbar,

		},
		data() {
			return {
				checkboxShow: false,
				star: 1.0,
				star1: 1.0,
			}
		},
		methods: {
			checkboxDom() {
				this.checkboxShow = !this.checkboxShow
			}
		}
	}
</script>

<style scoped lang="scss">
	.evaluate {
		padding: 40rpx;
		padding-top: 100rpx;
		.evaluateTip {
			text-align: center;
			color: #999999;
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}

		.addVideo {
			background-color: #fff;
			text-align: center;
			border-radius: 16px;
			padding: 40rpx 0;

			image {
				width: 100rpx;
			}
		}

		.textarea {
			width: 100%;
			padding: 40rpx;
			border-radius: 16px;
			background-color: #fff;
			box-sizing: border-box;
			margin: 40rpx 0;
		}

		.goods {
			display: flex;

			image {
				width: 100rpx;
			}

			text {
				color: #999999;
				font-size: 26rpx;
			}
		}

		.evaluateList {
			display: flex;
			align-items: center;

			text {
				color: #6954D5;
				margin-left: 10rpx;
			}
		}

		.evaluateFoot {
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			padding: 40rpx;

			.checkbox {
				display: flex;
				align-items: center;

				text {
					margin-left: 10rpx;
				}

				.checkboxShow {
					width: 35rpx;
					height: 35rpx;
				}

				.checkboxHide {
					width: 30rpx;
					height: 30rpx;
					border: 2rpx solid #999;
					border-radius: 50%;
				}
			}

			.evaluateFootBtn {
				width: 288rpx;
				height: 100rpx;
				background: #6954D5;
				border-radius: 50rpx;
				color: #fff;
				text-align: center;
				line-height: 100rpx;
			}

			.evaluateFootTip {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				color: #999;

				image {
					width: 35rpx;
					height: 35rpx;
				}

			}
		}
	}
</style>